<template>
	<view>
		<navBar title="发布页"></navBar>

		<view class="form-box" v-if="isPublish">
			<u--form labelWidth="80" labelPosition="top" :model="form" :rules="rules" ref="form" :labelStyle="{ paddingLeft: '5px' }">
				<!-- 文章标题 -->
				<u-form-item prop="title" label="文章标题" borderBottom required>
					<u--input v-model="form.title" border="none" placeholder="请输入文章标题" placeholderStyle="font-size: 18px; opacity: 0.5"></u--input>
				</u-form-item>
				<!-- 文章封面 -->
				<u-form-item prop="cover" label="文章封面" borderBottom required><u-upload :fileList="fileList" @afterRead="afterRead" name="1"></u-upload></u-form-item>
				<!-- 文章分类 -->
				<u-form-item prop="classifyArr" label="文章分类" borderBottom required>
					<view>
						<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
						<input :value="classifyName" @click="show = true" placeholder="请选择分类" border="none" disabled />
					</view>
				</u-form-item>
				<!-- 文章内容 -->
				<u-form-item prop="content" label="文章内容" borderBottom required>
					<jin-edit
						class="editor"
						height="50vh"
						@editOk="publish"
						:header="{ 'x-token': userInfo.token }"
						uploadFileUrl="https://eggblog.bluej.cn/api/imgUpload"
					></jin-edit>
				</u-form-item>
			</u--form>
		</view>
		<view class="not-found" v-else><u-empty mode="permission"></u-empty></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';

import { getClassify, createBlog } from '@/config/api.js';

export default {
	data() {
		return {
			isPublish: false,
			form: {
				title: '',
				content: '',
				cover: '',
				classifyArr: null,
				projectId: 152
			},
			rules: {
				title: {
					required: true,
					message: '请输入文章标题',
					trigger: ['change', 'blur']
				},
				content: {
					required: true,
					message: '请输入文章内容',
					trigger: ['change', 'blur']
				},
				cover: {
					required: true,
					message: '请上传文章封面',
					trigger: ['change']
				},
				classifyArr: {
					type: 'array',
					required: true,
					message: '请选择文章分类',
					trigger: ['change']
				}
			},
			fileList: [],
			show: false,
			columns: [],
			classifyList: [],
			classifyName: ''
		};
	},
	onLoad() {
		this.initClassify();
		// this.$forceUpdate();
	},
	onShow() {
		this.initPublish();
	},
	methods: {
		async afterRead(data) {
			const imgStatus = {
				status: 'uploading',
				message: '上传中'
			};
			this.fileList.push(imgStatus);

			uni.uploadFile({
				url: 'https://eggblog.bluej.cn/api/imgUpload',
				filePath: data.file.url,
				name: 'file',
				header: {
					'x-token': this.userInfo.token
				},
				success: res => {
					const fileData = JSON.parse(res.data);

					this.$set(this.fileList, 0, {
						status: 'success',
						url: fileData.data[0]
					});

					//	将图片上传后的URL保存到表单信息中
					this.form.cover = fileData.data[0];
				}
			});
		},
		async initClassify() {
			const classify = await getClassify();
			//	将分类数据进行保存
			//	利用 map 函数，将分类里的分类名称，整合为一个数组返回出来
			this.classifyList = classify.data.rows;
			const arr = this.classifyList.map(item => item.classifyName);
			this.columns.push(arr);
		},
		confirm(data) {
			// console.log(data);
			//	将分类 ID 保存到表单信息中
			this.form.classifyArr = [this.classifyList[data.indexs[0]].id];
			//	将分类名称展示到 input 框中
			this.classifyName = data.value[0];
			//	关闭弹出层
			this.show = false;
		},
		cancel() {
			this.show = false;
		},
		async publish(data) {
			uni.showLoading({
				title: '发布中...'
			});

			this.form.content = data.html;

			try {
				// console.log(this.form, this.userInfo.token);
				this.$refs.form.validate();

				const createRes = await createBlog(this.form, this.userInfo.token);

				uni.showToast({
					title: '发布成功'
				});

				//	清空数据，并跳往首页
				this.form = {
					title: '',
					content: '',
					cover: '',
					classifyArr: null,
					projectId: 152
				};
				this.fileList = [];
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}, 1000);
			} catch (e) {
				//TODO handle the exception
			}
		},
		initPublish() {
			// console.log(this.$store.state.userInfo);
			this.isPublish = this.$store.state.userInfo ? true : false;
		}
	},
	computed: {
		...mapState(['userInfo'])
	}
};
</script>

<style lang="scss">
* {
	font-family: 'catstyle';
}
.form-box {
	padding: 20px;
}

.editor {
	width: 90vw;
}

::v-deep .tool {
	z-index: 999;
	position: fixed;
	left: 0;
	bottom: 0;
	background: #fff;
}
.not-found {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(2);
}
</style>
